import { cn } from '@/utils/css'
import { VariantProps, cva } from 'class-variance-authority'
import { Loader2 } from 'lucide-react'
import React from 'react'

const spinnerVariants = cva('flex-col items-center justify-center h-full w-full', {
  variants: {
    show: {
      true: 'flex bg-black/5',
      false: 'hidden'
    }
  },
  defaultVariants: {
    show: true
  }
})

const loaderVariants = cva('animate-spin text-primary', {
  variants: {
    size: {
      small: 'size-6',
      medium: 'size-8',
      large: 'size-12'
    }
  },
  defaultVariants: {
    size: 'medium'
  }
})

interface SpinnerContentProps extends VariantProps<typeof spinnerVariants>, VariantProps<typeof loaderVariants> {
  className?: string
  containerClassName?: string
  children?: React.ReactNode
}

function Spinner({ size, show, children, className, containerClassName }: SpinnerContentProps) {
  return (
    <span className={cn(spinnerVariants({ show }), containerClassName)}>
      <Loader2 className={cn(loaderVariants({ size }), className)} />
      {children}
    </span>
  )
}

export { Spinner }
